<template>
  <div class="wrap-v1 container">
    <div class="nav">
      <el-scrollbar :native="true">
        <Menu :menus="menus"/>
      </el-scrollbar>
    </div>
    <div class="wrap-v2">
      <el-scrollbar :native="true">
        <router-view/>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import Menu from "../components/menu";

export default {
  components: {
    Menu,
  },
  setup() {
    const menus = [
      {
        title: "开发指南",
        child: [
          {
            path: "/cui/install",
            name: "安装",
          },
          {
            path: "/cui/start",
            name: "快速上手",
          },
        ],
      },
      {
        title: "按钮",
        child: [
          {
            path: "/cui/button",
            name: "基础按钮",
          },
          {
            path: "/cui/link",
            name: "Link 文字链接",
          },
        ],
      }, {
        title: '表单',
        child: [
          {
            path: '/cui/radio',
            name: 'Radio 单选框'
          },
          {
            path: '/cui/checkbox',
            name: 'Checkbox 多选框'
          },
          {
            path: "/cui/input",
            name: "Input输入框",
          },
          {
            path: "/cui/inputNumber",
            name: "InputNumber计数器",
          },
          {
            path: "/cui/select",
            name: "Select 选择器",
          },
          {
            path: '/cui/cascader',
            name: 'Cascader 级联选择器'
          },
          {
            path: '/cui/switch',
            name: 'Switch 开关'
          },
          {
            path: '/cui/slider',
            name: 'Slider 滑块'
          },
          {
            path: '/cui/timePicker',
            name: 'TimePicker 时间选择器'
          }, {
            path: '/cui/datePicker',
            name: 'DatePicker 日期选择器'
          },
          {
            path: '/cui/colorPicker',
            name: 'ColorPicker 颜色选择器'
          },
          {
            path: '/cui/upload',
            name: 'Upload 上传'
          },
          {
            path: "/cui/rate",
            name: "Rate 评分",
          },
          {
            path: "/cui/form",
            name: "Form表单",
          }
        ]
      },
      {
        title: "Notice",
        child: [
          {
            path: "/cui/alert",
            name: "Alert 警告",
          },
          {
            path: "/cui/multiFunMessage",
            name: "multiFunMessage 多功能消息提示",
          }
        ],
      },
      {
        title: "数据",
        child: [
          {
            path: "/cui/progress",
            name: "Progress 进度条",
          },
          {
            path: "/cui/empty",
            name: "Empty 空状态",
          },
          {
            path: "/cui/pagination",
            name: "Pagination 分页",
          },
          {
            path: "/cui/tag",
            name: "Tag 标签",
          }
        ],
      },
      {
        title: "导航",
        child: [
          {
            path: "/cui/menu",
            name: "NavMenu 导航菜单",
          },
          {
            path: "/cui/breadcrumb",
            name: "Breadcrumb  面包屑",
          }
        ]
      },
      {
        title: "其他",
        child: [
          {
            path: "/cui/dialog",
            name: "Dialog 对话框",
          },
          {
            path: "/cui/tooltip",
            name: "Tooltip 文字提示",
          }
        ]
      }
    ];
    return {
      menus,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  height: 100%;

  .nav {
    flex: 1;
    height: 100%;
  }

  .el-scrollbar {
    width: 100%;
    height: 100%;
  }
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
  overflow-y: auto;
}
</style>
